<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>测试vue</title>
    <script src="../static/js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--  <input  type="text" v-bind:value="xxx" ><br>-->
<!--      通常省略v-bind,一般用在属性初始化的时候-->
      <input  type="text" :value="xxx" ><br>
      <!--<button onclick="upper()">点我</button>-->
     <!-- <button v-on:click="upper">点我</button>-->
      <button >点我</button>
<!--      通过v-if判断isShow的值是否为true，真显示，假不显示-->
      <div v-if="isShow">{{myDiv}}</div>
      <button @click="hhh">fdsaf</button>
      <table border="1px">
            <tr v-for="dept in deptList">
                <td>{{dept.deptId}}</td>
                <td>{{dept.deptName}}</td>
                <td>{{dept.orderNum}}</td>
                <td>{{dept.status}}</td>
                <td>{{dept.createBy}}</td>
            </tr>

      </table>
  </div>

    <script>
         /* function upper() {
             var inputValue=  document.getElementsByTagName("input")[0].value;
              let toUpperCase = inputValue.toUpperCase();
              document.getElementsByTagName("input")[0].value=toUpperCase;
          }*/
            var app=new Vue({
                el:"#app",
                data:{
                    xxx:"abc",
                    myDiv:"可以通过差值表达式初始化div的内容",
                    isShow:false,
                    "deptList": [
                        {
                            "deptId": 103,
                            "deptName": "测试部门",
                            "orderNum": 3,
                            "status": "0",
                            "delFlag": "0",
                            "createBy": "Enzo",
                            "createTime": "2018-03-16 19:33:00",
                            "updateBy": "Enzo",
                            "updateTime": "2020-12-24 18:27:48"
                        },
                        {
                            "deptId": 104,
                            "deptName": "财务部门",
                            "orderNum": 4,
                            "status": "0",
                            "delFlag": "0",
                            "createBy": "Enzo",
                            "createTime": "2018-03-16 19:33:00",
                            "updateBy": "Enzo",
                            "updateTime": "2018-03-16 19:33:00"
                        },
                        {
                            "deptId": 105,
                            "deptName": "运维部门",
                            "orderNum": 5,
                            "status": "0",
                            "delFlag": "0",
                            "createBy": "Enzo",
                            "createTime": "2018-03-16 19:33:00",
                            "updateBy": "Enzo",
                            "updateTime": "2018-03-16 19:33:00"
                        }
                    ]
                },
                methods:{
                    //定义一个方法,将xxx的值修改为大写
                    upper:function () {
                        this.xxx=this.xxx.toUpperCase();
                    },
                    hhh:function(){
                        alert(12333)
                    }
                }
            })
    </script>
</body>
</html>
